<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/My.css">
    <title>团购APP我的</title>
</head>
<body>
        <header class="clearfix">
                <div class="back fl">
                    <button>Back</button>
                </div>
                <div class="dizhi fr">
                    <img src="./img/wdimg/message.png" alt="">
                </div>
                <div class="fenlei">
                    <p>我的</p>
                </div>
            </header>

            <div id="main">
                <!-- 头像 -->
                <div class="toux clearfix">
                    <img class="fl" src="./img/wdimg/Head-portrait.png" alt="">
                    <div class="fl">
                        <a href="">点击登录</a><br>
                        <a href="">常居地未设置</a>
                    </div>
                    <p class="fr"><a href="">&gt;</a></p>
                </div>
                <!-- 点评 -->
                <div class="dianp">
                    <div class="fl">
                        <img src="./img/wdimg/review.png" alt="">
                        <p><a href="">我的点评</a></p>
                    </div>
                    <div class="fr">
                            <img src="./img/wdimg/coupons.png" alt="">
                            <p><a href="">我的优惠券</a></p>
                    </div>
                    <div>
                            <img src="./img/wdimg/collect.png" alt="">
                            <p><a href="">我的收藏</a></p>
                    </div>
                </div>
                <!-- 钱包 -->
                <div class="money">
                    <ul class="clearfix">
                        <li class="fl">
                            <img src="./img/wdimg/money.png" alt="">
                        </li>
                        <li class="fl"><a href="">我的钱包</a></li>
                        <li class="fr">
                            <a href=""><img src="./img/wdimg/icon2.png" alt=""></a> 
                        </li>
                        <li class="fr"><p>更多</p></li>
                    </ul>
                    <ul class="clearfix">
                            <li class="fl">
                                <img src="./img/wdimg/to-review.png" alt="">
                            </li>
                            <li class="fl"><a href="">待点评</a></li>
                            <li class="fr">
                                <a href=""><img src="./img/wdimg/icon2.png" alt=""></a>
                            </li>
                            <li class="fr"><p>更多</p></li>
                    </ul>
                    <ul class="clearfix">
                            <li class="fl">
                                <img src="./img/wdimg/friends.png" alt="">
                            </li>
                            <li class="fl"><a href="">找好友</a></li>
                            <li class="fr">
                                <a href=""><img src="./img/wdimg/icon2.png" alt=""></a> 
                            </li>
                            <li class="fr"><p>更多</p></li>
                    </ul>
                    <ul class="clearfix">
                            <li class="fl">
                                <img src="./img/wdimg/footprint.png" alt="">
                            </li>
                            <li class="fl"><a href="">我的足迹</a></li>
                            <li class="fr">
                                <a href=""><img src="./img/wdimg/icon2.png" alt=""></a> 
                            </li>
                            <li class="fr"><p>更多</p></li>
                    </ul>
                    <ul class="clearfix">
                            <li class="fl">
                                <img src="./img/wdimg/setting.png" alt="">
                            </li>
                            <li class="fl"><a href="">设置</a></li>
                            <li class="fr">
                                <a href=""><img src="./img/wdimg/icon2.png" alt=""></a> 
                            </li>
                            <li class="fr"><p>更多</p></li>
                    </ul>
                    <ul class="clearfix">
                            <li class="fl">
                                <img src="./img/wdimg/contact.png" alt="">
                            </li>
                            <li class="fl"><a href="">联系</a></li>
                            <li class="fr">
                                <a href=""><img src="./img/wdimg/icon2.png" alt=""></a> 
                            </li>
                            <li class="fr"><p>更多</p></li>
                    </ul>
                </div>
                <!--退出按键  -->
                <div class="tcaj clearfix">
                    <button class="fl">退出</button>
                    <button class="fr">注销</button>

                </div>


            </div>

            <footer>
                    <ul class="clearfix">
                       <li class="fl">
                            <a href="index.html"><img src="img/flimg/11_03.png" alt=""></a>
                            <p>首页</p>
                        </li>
                       <li class="fl">
                                    <a href="classification.html"><img src="img/syimg/class.png" alt=""></a>
                                    <p>分类</p>
                           </li>
                            <li class="fl">
                                    <a href="find.html"><img src="img/syimg/discover.png" alt=""></a>
                                    <p>发现</p>
                            </li>
                            <li class="fl">
                                    <a href="My.html"><img src="img/wdimg/wd00_03.png" alt=""></a>
                                    <p>我的</p>
                            </li>
                
                        </ul>
            </footer>
            <script>
                    
                        
                            document.body.style.height = window.innerHeight + "px";
                        
                            /*动态改变根元素字体大小*/
                            function recalc() {
                                // 获取客户端宽度
                                var clientWidth = document.documentElement.clientWidth;
                                if(!clientWidth) return;
                                // 字体大小   = 1个rem单位表示多少个像素（设备的宽度   /设计宽度）
                                document.documentElement.style.fontSize = 100 * (clientWidth / 750) + 'px';
                                
                            }
                            // 初始化计算rem
                            function initRecalc() {
                                
                                recalc();
                                // if(浏览器支持横竖屏切换的事件){横竖屏事件}else{ resize事件 }
                                var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
                                if(!document.addEventListener) return;
                                window.addEventListener(resizeEvt, recalc, false);
                                document.addEventListener('DOMContentLoaded', recalc, false);
                            }
                            initRecalc();
                                
                                
                                
                     </script> 

    
</body>
</html>